<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息盒子</title>
    <link rel="stylesheet" href="/Public/Swoole/layui/css/layui.css" media="all">
    <style>
    .layim-msgbox {
        margin: 15px;
    }
    
    .layim-msgbox li {
        position: relative;
        margin-bottom: 10px;
        padding: 0 130px 10px 60px;
        padding-bottom: 10px;
        line-height: 22px;
        border-bottom: 1px dotted #e2e2e2;
    }
    
    .layim-msgbox .layim-msgbox-tips {
        margin: 0;
        padding: 10px 0;
        border: none;
        text-align: center;
        color: #999;
    }
    
    .layim-msgbox .layim-msgbox-system {
        padding: 0 10px 10px 10px;
    }
    
    .layim-msgbox li p span {
        padding-left: 5px;
        color: #999;
    }
    
    .layim-msgbox li p em {
        font-style: normal;
        color: #FF5722;
    }
    
    .layim-msgbox-avatar {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
    }
    
    .layim-msgbox-user {
        padding-top: 5px;
    }
    
    .layim-msgbox-content {
        margin-top: 3px;
    }
    
    .layim-msgbox .layui-btn-small {
        padding: 0 15px;
        margin-left: 5px;
    }
    
    .layim-msgbox-btn {
        position: absolute;
        right: 0;
        top: 12px;
        color: #999;
    }
    </style>
</head>

<body>
    <ul class="layim-msgbox" id="LAY_view"></ul>
    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
        {{# layui.each(d.data, function(index, item){ if(item.from){ }}
        <li data-uid="{{ item.from }}" data-from_group="{{ item.from_group }}">
            <a href="/u/{{ item.from }}/" target="_blank">
                <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
            </a>
            <p class="layim-msgbox-user">
                <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
                <span>{{ item.time }}</span>
            </p>
            <p class="layim-msgbox-content">
                {{ item.content }}
                <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
            </p>
            <p class="layim-msgbox-btn">
            {{# if(!item.agree){ }}
                <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
                <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
            {{# } else if(item.agree == 1) { }}
                已同意
            {{# } else { }}
                <em>已拒绝</em>
            {{# } }}
            </p>
        </li>
        {{# } else { }}
        <li class="layim-msgbox-system">
            <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
        </li>
        {{# } }); }}
    </textarea>
    <!-- 上述的item.from为空则表示是系统消息 -->
    <script src="/Public/Swoole/layui/layui.js"></script>
    <script>
    layui.use(['layim', 'flow'], function() {
        var layim = layui.layim,
            layer = layui.layer,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            flow = layui.flow;

        var cache = {}; //用于临时记录请求到的数据

        //请求消息
        var renderMsg = function(page, callback) {
            $.post('./ajax_getMsg', {
                page: page || 1
            }, function(res) {
                if (res.code != 0) {
                    return layer.msg(res.msg);
                }

                //记录来源用户信息
                layui.each(res.data, function(index, item) {
                    cache[item.from] = item.user;
                });

                callback && callback(res.data, res.pages);
            });
        };

        //消息信息流
        flow.load({
            elem: '#LAY_view' //流加载容器
                ,
            isAuto: false,
            end: '<li class="layim-msgbox-tips">暂无更多新消息</li>',
            done: function(page, next) { //加载下一页
                renderMsg(page, function(data, pages) {
                    var html = laytpl(LAY_tpl.value).render({
                        data: data,
                        page: page
                    });
                    next(html, page < pages);
                });
            }
        });

        //打开页面即把消息标记为已读
        // $.post('/message/read', {
        //     type: 1
        // });

        //操作
        var active = {
            //同意
            agree: function(othis) {
                var li = othis.parents('li'),
                    uid = li.data('uid'),
                    from_group = li.data('from_group'),
                    user = cache[uid];
                    console.log(parent.layui.layim.cache());
                //选择分组
                parent.layui.layim.setFriendGroup({
                    type: 'friend',
                    username: user.username,
                    avatar: user.avatar,
                    group: parent.layui.layim.cache().friend,
                    submit: function(group, index) {
                        $.post('./ajax_agreeFriend', {
                            uid: uid //对方用户ID
                                ,
                            from_group: from_group //对方设定的好友分组
                                ,
                            group: group //我设定的好友分组
                        }, function(res) {
                            if (res.code != 0) {
                                return parent.layer.msg(res.msg);
                            }
                            //先删除好友
                            parent.layui.layim.removeList({
                                type: 'friend' //或者group
                                ,id: uid //好友ID
                            });

                            //通知好友追加到主面板
                            parent.laychat.socket.send(JSON.stringify({"type":"agree_friend_request", "to_userid":uid, "groupid":from_group, "from_user":parent.layui.layim.cache().mine}));

                            //将好友追加到主面板
                            parent.layui.layim.addList({
                                type: 'friend',
                                avatar: user.avatar //好友头像
                                    ,
                                username: user.username //好友昵称
                                    ,
                                groupid: group //所在的分组id
                                    ,
                                id: uid //好友ID
                                    ,
                                sign: user.sign //好友签名
                            });
                            parent.layer.close(index);
                            othis.parent().html('已同意');

                        });
                    }
                });
            }

            //拒绝
            ,
            refuse: function(othis) {
                var li = othis.parents('li'),
                    uid = li.data('uid');

                layer.confirm('确定拒绝吗？', function(index) {
                    $.post('./ajax_refuseFriend', {
                        uid: uid //对方用户ID
                    }, function(res) {
                        if (res.code != 0) {
                            return layer.msg(res.msg);
                        }

                        //通知好友被拒绝
                        parent.laychat.socket.send(JSON.stringify({"type":"refuse_friend_request", "to_userid":uid, "from_user":parent.layui.layim.cache().mine}));
                        layer.close(index);
                        othis.parent().html('<em>已拒绝</em>');
                    });
                });
            }
        };

        $('body').on('click', '.layui-btn', function() {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
    </script>
</body>

</html>
